<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
          body,html{
              width: 100%;
              height: 100%;
              display: flex;
              justify-items:center;
              justify-content: center;
              align-items: center;
              position: relative;
          }
          #table1{
           
            justify-content:center;
            align-items: center;
            position: relative;
            margin: auto;
           
         
          
           }
        </style>
        <!-- <script src="jquery-3.6.1.js"></script> -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    </head>
    <body>
      
       
         <table  id="table1" border="1" cellpadding="0" cellspacing="0" align="cneter" >
            <tr>
                <th colspan=2 align="center">
                    登录界面
                </th>
            </tr>
            <tr>
                <td>
                    请输入用户名：
                </td>
                <td>
                    <input   v-model="username"  type=user  size=16 :style="userNameStyle">
                </td>
            </tr>
            <tr>
                <td>
                    请输入密码：
                </td>
                <td>
                    <input v-model=password type=password name=pwd size=16>
                </td>
            </tr>
               <tr>
                <td colspan="2" align="right"  >
                       <span style="color:red;"v-text="errMsg"></span>
                    <input  type="submit" value='登录' >
                </td>
               </tr>
            </table>
       
    </body>
         <script>
           var vue= new Vue({
                 el:'table',
                 data:{
                    isLogining:false,
                    username:'rose',
                    password:'888888',
                    errMsg:'',
                    userNameStyle:[
                        {margin:'16px'}
                    ]
                    },
                    // methods:{
                    //     handleFocus:function(){
                    //         this.userNameStyle={
                    //             marign:'16px'
                    //         };
                    //     }
                    // }
                 }
)
      
         </script>   
</html>